<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-col :span="24" class="container">
            <el-calendar v-model="date" :first-day-of-week="7">
              <template slot="dateCell" slot-scope="{date, data}">
                <div>
                  <h3 class="solar">{{ data.day.split('-')[2] }}</h3>
                  <h5 class="lunar">{{ solarToLunar(date, data) }}
                    <span>{{ constellation(date, data) }}</span>
                  </h5>
                </div>
              </template>
            </el-calendar>
          </el-col>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { calendar } from '@/utils/calendar.js'

export default {
  name: 'calendar',
  data() {
    return {
      date: new Date(),
      constellationText: '',
      title: '',
      currentDate:''
    }
  },
  watch: {
    date:{
      handler(newVal, oldVal) {
        this.currentDate = newVal
        this.changeTitle()
      },
      immediate:true
    }
  },
  methods: {
    changeTitle() {
      let time =  this.currentDate.getFullYear() + '-' + ( this.currentDate.getMonth() + 1) + '-' + this.currentDate.getDate();
      let solarDayArr = time.split('-')
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
      this.title = lunarDay.cYear + ' ' + '年' + ' ' + lunarDay.cMonth + ' ' + '月' + ' ' + lunarDay.gzYear + '年' + ' ' + lunarDay.gzMonth + '月'
      this.$nextTick(() => {
        let dom = document.querySelector('.el-calendar__title')
        dom.innerHTML = this.title
      })
    },
    // 公历转农历
    solarToLunar(slotDate, slotData) {
      let solarDayArr = slotData.day.split('-')
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

      // 农历日期
      let lunarMD = lunarDay.IDayCn

      // 公历节日\农历节日\农历节气
      let festAndTerm = []
      festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
      festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')
      return festAndTerm === '' ? lunarMD : festAndTerm
    },
    constellation(slotDate, slotData) {
      let solarDayArr = slotData.day.split('-')
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
      return lunarDay.gzDay + ' ' + lunarDay.astro
    }
  },
}
</script>

<style scoped lang="scss">
.box {
  padding-bottom: 70px;
  .solar {
    font-size: 16px;
    font-weight: 600;
  }

  .el-calendar {
    //height: 568px;
    ::v-deep.el-calendar__body {
      th {
        font-size: 14px;
        font-weight: 400;
      }
    }

    ::v-deep.el-calendar__title {
      font-size: 14px;
    }
  }

  .lunar {
    font-size: 12px;
    font-weight: 500;

    span {
      float: right;
      font-size: 12px;
      font-weight: 400;
    }
  }
}
</style>
